<template>
  <div class="container">
    <common-header :title="title"></common-header>
    <div class="content">
      <div :class="{'user': true, 'clearfix': true, 'warning-style': !userIsExist, 'focus-style': userIsFocus}">
        <b></b>
        <input type="text" @focus="userFocus()" @blur="userBlur()" placeholder="通行证号/手机号/邮箱" v-model.trim="user">
        <div class="warning" v-show="!userIsExist">
          <i></i>
          <div class="warning_message">
            请输入正确的账号
          </div>
        </div>
      </div>
      <div :class="{'psw': true, 'clearfix': true, 'warning-style': !codeIsRight, 'focus-style': codeIsFocus}">
        <b></b>
        <input type="password" @focus="codeFocus()" @blur="codeBlur()" placeholder="请输入密码" v-model.trim="code">
        <div class="lose_psw">
          <router-link to="user/findpsw">忘记密码？</router-link>
        </div>
        <div class="warning" v-show="!codeIsRight">
          <i></i>
          <div class="warning_message">
            密码错误
          </div>
        </div>
      </div>
      <div class="login" @click="login()">
        登录
      </div>
    </div>
    <clientSide></clientSide>
  </div>
</template>
<script>
  // 引入页面最下面下载客户端的组件
  import clientSide from '../../subComponents/clientSide.vue'

  // 引入头部组件
  import Header from '../../subComponents/header.vue'

  //  import $ from 'jquery'

  export default {
    data () {
      return {
        title: '账号密码登录',
        userIsExist: true,
        userIsFocus: false,
        codeIsFocus: false,
        codeIsRight: true,
        user: this.$route.query.user || '',
        code: '',
        regExp: '' // 正则
      }
    },
    components: {
      clientSide,
      'common-header': Header
    },
    methods: {
      userFocus () {
        this.userIsExist = true
        this.userIsFocus = true
      },

      codeFocus () {
        this.codeIsFocus = true
        this.codeIsRight = true
      },

      userBlur () {
        this.userIsFocus = false

//        账号是否存在 从后台接口验证
        this.regExp = true
        this.userIsExist = this.regExp
      },

      codeBlur () { this.codeIsFocus = false },

      login () {
        if (!this.user) {
          this.userIsExist = false
          this.codeIsFocus = false
          return
        }

        this.regExp = '123456' // 接口获得
        this.codeIsRight = (this.code === this.regExp)

        if (this.codeIsRight && this.userIsExist) {
          // 验证成功
          this.$router.push({path: '/homepage'})
        }
      }
    }
  }
</script>
<style scoped>
  .container {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
  }

  .content {
    margin-top: 0.3rem;
  }

  .content .focus-style {
    border-color: #5E88FF !important;
  }

  .content .warning-style {
    border-color: #fd7671 !important;
  }

  .content input {
    border: none;
    background-color: #f7f7f7;
    width: 100%;
    color: #333;
    font-size: 0.36rem;
    text-indent: 0.5rem;
  }

  .content .warning {
    width: 100%;
    height: 0.37rem;
    position: absolute;
    left: 0;
    bottom: -0.4rem;
  }

  .content .warning i {
    position: absolute;
    top: 0.05rem;
    left: 0.05rem;
    width: 0.26rem;
    height: 0.26rem;
    vertical-align: middle;
    background: url('../../../assets/images/login/warning.png') no-repeat;
    background-size: 100% 100%;
  }

  .content .warning .warning_message {
    padding-left: 0.37rem;
    width: 100%;
    color: #fd7671;
    font-size: 0.24rem;
    height: 100%;
    line-height: 0.37rem;
  }

  .content .user, .content .psw {
    width: 6.88rem;
    height: 1.14rem;
    position: relative;
    margin: 0 auto;
    border-bottom: 1px solid #cdcdcd;
    padding-top: 0.5rem;
  }

  .content .user b {
    width: 0.3rem;
    height: 0.34rem;
    background: url('../../../assets/images/sprite.png') no-repeat -3.32rem -0.82rem;
    background-size: 10rem 6rem;
    position: absolute;
    top: 0.58rem;
    left: 0.08rem;
  }

  .content .psw b {
    width: 0.3rem;
    height: 0.36rem;
    background: url('../../../assets/images/sprite.png') no-repeat -2.66rem -0.79rem;
    background-size: 10rem 6rem;
    position: absolute;
    top: 0.58rem;
    left: 0.08rem;
  }

  .content .psw .lose_psw {
    position: absolute;
    top: 0.65rem;
    right: 0.2rem;
  }

  .content .psw .lose_psw a {
    font-size: 0.3rem;
    color: #5e88ff;
  }

  .login {
    width: 6.88rem;
    height: 0.9rem;
    border-radius: 0.9rem;
    background-color: #5e88ff;
    text-align: center;
    line-height: 0.9rem;
    margin: 0.64rem auto;
    font-size: 0.36rem;
    color: #fff;
  }
</style>
